<template>
  <div class="f">
    <span class="f22 fb mt40 ml20"  style="color: #00B2FF;">{{ time }}</span>
    <span class="f18 mt40 ml10" style="color: #00B2FF;">{{ date }} {{ week }}  </span>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      timer: null,
      time: "",
      date: "",
      week: "",
    };
  },
  mounted() {
    this.dateFormat();
    this.timer = setInterval(() => {
      this.dateFormat();
    }, 1000);
  },
  beforeDestroy() {
    this.dataDestroy();
  },
  methods: {
    dataDestroy() {
      if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
      }
    },
    dateShow() {},
    dateFormat() {
      let date = new Date();
      let year = date.getFullYear();
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
 
      this.date = year + "-" + month + "-" + day + " ";
      this.time = hours + ":" + minutes + ":" + seconds;
      this.week = "星期" + "日一二三四五六".charAt(date.getDay());
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  height: 85%;
  padding: 0 20px;
  font-size: 16px;
  color: #fff;
}
</style>